<template>
    <div>
        <el-dialog title="添加出库单" :visible.sync="disable" :before-close="conmel" width="1200px">
            <div class="botcenten">
                <div>
                    <el-form label-position='right' ref="form" :model="form" :inline="true" :rules="rules"
                        class="demo-form-inline">
                        <el-form-item label="耗材出库主题:" label-width="200px" prop="outName">
                            <el-input placeholder="请输入耗材出库主题" v-model="form.outName"></el-input>
                        </el-form-item>
                        <el-form-item label="出库类型:" label-width="200px" prop="outSource">
                            <el-input :disabled="true" v-model="form.outSource"> </el-input>
                        </el-form-item>
                        <el-form-item label="出库仓库:" label-width="200px" prop="repositoryId">
                            <el-select class="handle-select" v-model="form.repositoryId" placeholder="请选择出库仓库">
                                <el-option v-for="item in repositorylist" :key="item.id" :label="item.repositoryName"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出库备注:" label-width="200px" prop="remark">
                            <el-input placeholder="请输入出库备注" v-model="form.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="领用人:" label-width="200px" prop="useId">
                            <el-select class="handle-select" v-model="form.useId" placeholder="请选择领用人">
                                <el-option v-for="item in userlist" :key="item.id" :label="item.userName"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="领用时间:" label-width="200px" prop="useTime">
                            <el-date-picker v-model="form.useTime" type="date" placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider></el-divider>
                <div class="butcenter">
                    <el-button type="primary" icon="el-icon-plus" @click="add">添 加</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="remove">删 除 勾 选</el-button>
                </div>
                <div>
                    <el-table height="290" :data="tableData" border class="table" ref="multipleTable"
                        header-cell-class-name="table-header" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" label="序号" width="60" align='center'>
                            <template slot-scope="scope">
                                {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="consumName" label="物品名称" align='center'></el-table-column>
                        <el-table-column prop="consumStandard" label="规格型号" align='center'></el-table-column>
                        <el-table-column prop="consumNum" label="数量" align='center'>
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.consumNum" controls-position="right" :min="0"
                                    :max="scope.row.consumNummax"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column prop="consumUnit" label="计量单位" align='center'></el-table-column>
                        <el-table-column prop="consumPrice" label="单价" align='center'></el-table-column>
                        <el-table-column prop="repositoryName" label="仓库" align='center'></el-table-column>
                    </el-table>
                </div>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="conmel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
        <out_add_addlist @selearr="seletlist" ref="addlist" @closeadd="visible = false" :visible="visible">
        </out_add_addlist>
    </div>

</template>

<script>
import { formatTime } from '../../../../utils/util.js'
import { repository, userSelect, outadd } from '../../../../api/index'
import out_add_addlist from './out_add_addlist.vue';
export default {
    name: "out-add",
    props: {
        disable: {
            type: Boolean,
            required: true
        }
    },
    watch: {
        'form.repositoryId': function (newVal, oldVal) {
            const that = this
            const aa = this.tableData[0]?.repositoryId === 'undefined' ? 9 : this.tableData[0]?.repositoryId;
            if (newVal != aa && that.tableData.length > 0 && this.disable) {
                that.$confirm('切换仓库会清空当前所添加的耗材列表,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    that.$message({
                        type: 'success',
                        message: '切换成功!'
                    });
                    that.tableData = []
                }).catch(() => {
                    that.repositoryId = oldVal
                    that.$message({
                        type: 'info',
                        message: '已取消切换'
                    });
                });
            }
        }
    },
    components: {
        out_add_addlist
    },
    data() {
        return {
            form: {
                outName: "",
                outSource: "外部出库",
                repositoryId: "",
                useId: "",
                useName: "",
                useTime: "",
                remark: "",
                conSums: []
            },
            visible: false,
            query: {
                pageNum: 1,
                pageSize: 15,
                pageTotal: 0,
            },
            tableData: [],
            repositorylist: [],
            userlist: [],
            delelist: [],
            rules: {
                outName: [
                    { required: true, message: '耗材出库主题不能为空', trigger: 'blur' },
                ],
                useTime: [
                    { required: true, message: '领用时间不能为空', trigger: 'blur' },
                ],
                useId: [
                    { required: true, message: '领用人不能为空', trigger: 'change' },
                ],
                repositoryId: [
                    { required: true, message: '出库仓库不能为空', trigger: 'change' },
                ],
                outSource: [
                    { required: true, message: '出库类型不能为空', trigger: 'blur' },
                ],
                remark: [
                    { required: true, message: '出库备注不能为空', trigger: 'blur' },
                ],
            }

        }
    },
    mounted() {

    },
    methods: {
        open() {
            this.repositorys()
            this.userSelects()
        },

        remove() {
            this.tableData = this.tableData.filter(item => !this.delelist.some(obj => JSON.stringify(obj) === JSON.stringify(item)));
        },
        seletlist(e) {
            // 将 this.tableData 转换为 Set
            const tableDataSet = new Set(this.tableData.map(JSON.stringify));
            // 遍历数组 e，将其中不存在于 this.tableData 的元素添加到 this.tableData 中
            e.forEach(item => {
                if (!tableDataSet.has(JSON.stringify(item))) {
                    this.tableData.push(item);
                }
            });

        },
        submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.tableData.length > 0) {
                        const user = this.userlist.filter(item => item.id == this.form.useId)
                        this.form.useName = user[0].userName
                        this.form.useTime = formatTime(this.form.useTime)
                        this.form.conSums = this.tableData.map((item) => {
                            return {
                                consumName: item.consumName,
                                consumStandard: item.consumStandard,
                                consumUnit: item.consumUnit,
                                consumNum: item.consumNum,
                                consumPrice: item.consumPrice
                            }

                        })
                        await outadd(this.form)
                        this.conmel()
                        this.$emit('refresh')
                    } else {
                        this.$message({
                            message: '耗材列表不能为空',
                            type: 'error'
                        });
                    }

                } else {
                    return false;
                }
            });
        },
        add() {
            if (this.form.repositoryId) {
                this.visible = true
                this.$refs.addlist.open(this.form.repositoryId)
                return
            }
            this.$message({
                message: '请先选择出库仓库在进行添加',
                type: 'warning'
            });
        },
        //仓库
        async repositorys() {
            const data = await repository()
            this.repositorylist = data.data.data

        },
        async userSelects() {
            const data = await userSelect()
            this.userlist = data.data.data
        },
        conmel() {
            // 清空表单
            this.$refs.form.resetFields();
            this.tableData = []
            this.query.pageNum = 1

            this.$emit('close')
            this.form = {
                outName: "",
                outSource: "外部出库",
                repositoryId: "",
                useId: "",
                useName: "",
                useTime: "",
                remark: "",
                conSums: []
            }
        },

        handleSelectionChange(val) {
            this.delelist = val
        }
    }

}
</script>


<style lang="less" scoped>
::v-deep .el-input {
    width: 200px;
}

::v-deep .el-input-number {
    .el-input {
        width: 100px;
    }


}

.butcenter {
    margin-bottom: 10px;
    float: right;
}
</style>